<script setup>
import { reactive } from 'vue'
import ListItem from "@/components/listItem.vue";
import {getDrillList} from "@/api/drill";
import {onShow} from "@dcloudio/uni-app";

const dict = uni.getStorageSync('dict')
const pageData = reactive({
  loading: false,
  listData: [],
  queryListParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0
})
const lower = (e) => {
  if(pageData.listData.length >= pageData.total) return
  pageData.queryListParams.pageNum++
  getList()
}
const onRefresh = (e) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const handleDetail = (i) => {
  console.log('gogo', i)
  uni.navigateTo({
    url: '/pages/drill/detail?id=' + i.id
  })
}
const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/drill/detail'
  })
}
const getList = () => {
  pageData.loading = true
  getDrillList(pageData.queryListParams).then(res => {
    console.log(res)
    pageData.listData = [
      ...pageData.listData,
      ...res.rows
    ]
    pageData.total = res.total
    pageData.loading = false
  })
}
onShow(() => {
  pageData.listData = []
  getList()
})
</script>

<template>
  <scroll-view v-if="pageData.loading === false && pageData.listData.length" :scroll-top="0" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="pageData.loading" class="list-body" @scrolltolower="lower" @refresherrefresh="onRefresh">
    <list-item v-for="(item, index) in pageData.listData" :key="item.id" :title="item.drillThemes" @click="handleDetail(item)">
      <template v-slot:desc>
        地址：{{ item.address }}<br>
        演练时间：{{ item.drillTime }}
      </template>
    </list-item>
  </scroll-view>
  <nut-empty v-if="pageData.loading === false && !pageData.listData.length" image="empty" description="无内容"></nut-empty>
  <view v-if="pageData.loading === true" class="loading-box">
    <nut-icon name="loading"></nut-icon>
  </view>
  <view class="btn">
    <nut-button block type="primary" @click="handleAdd">
      <template #icon>
        <nut-icon name="uploader" />
      </template>
      新增
    </nut-button>
  </view>
</template>

<style scoped lang="scss">
.list-body{padding: 10px 0 40px;box-sizing:border-box;height: calc(100vh - 40px);}
.btn{position: fixed;bottom: 20px;width: 100%;padding: 0 40px;box-sizing: border-box;}
.hours{font-size: 12px; color: #999;}
</style>
<style>
.nut-tab-pane{display: none!important;}
.nut-list-item{height: auto!important;}
</style>
